<template>
	<view class="container">
		<text class="detail" @tap="godetail">贝壳明细</text>
		<view class="nowShallBox">
			<view class="item withdrawYes">
				<view class="icon">
					<image :src="data.image" mode=""></image>
					<text v-if="data.id == 1">{{data.count}}</text>
					<text v-else>{{data.diesVenit}}</text>
				</view>
				<text class="label" v-if="data.id == 1">当前拥有</text>
				<text class="label" v-else>可转换</text>
			</view>
			<view class="item withdrawNo" v-if="data.id !== 1">
				<view class="icon">
					<image :src="data.image" mode=""></image>
					<text>{{data.unexpired}}</text>
				</view>
				<text class="label">未到期</text>
			</view>
		</view>
		<button class="btn withdraw" type="default" v-if="id == 1" @tap="goWithdraw">提现</button>
		<button class="btn exchange" type="default" v-if="id == 1" @tap="goChange">选择贝壳服务</button>
		<view class="btn goBuy" type="default" v-if="id == 1" @tap="navTo('/mall/index/indexPage?current=0')">
			<image src="../../../static/images/center/11112s.png" mode=""></image>
			<text class="goBuyText">前往消费</text>
			<text class="yticon icon-you"></text>
		</view>
		<button class="btn goChangeGoods" type="default" v-if="id != 1" @tap="goChangeGoods">置换商品</button>
		<!-- <button class="btn applyToBuy" type="default" v-if="id != 1" @tap="applyToBuy">申请收购</button> -->
		<view class="bottom__explan" @tap="navTo('/pages/center/help/rulesDetail?type='+ruleId)">
			<text class="cell-more yticon icon-zuo"></text>
			{{shellname}}说明
			<text class="cell-more yticon icon-you"></text>
		</view>
	</view>
</template>

<script>
	import {
		shellList
	} from "@/api/shell.js"
	export default {
		data() {
			return {
				id: null,
				data: {},
				phone: '',
				is_checked: '',
				is_bind_bank: '',
				withdraw_pass: '',
				shellname: '',
				ruleId: 0
			}
		},
		onLoad(option) {
			this.shellname = option.name;
			uni.setNavigationBarTitle({
				title: option.name
			})
			this.id = option.id;
			// : 1,黑贝壳 4,蓝贝壳 3,红贝壳 2,黄贝
			// 黑贝壳说明传值 1黑贝壳 2余额 3钱包 4蓝 5红 6 黄,以区分规则详情 
			switch (option.id) {
				case '1':
					this.ruleId = 1;
					break;
				case '2':
					this.ruleId = 6;
					break;
				case '3':
					this.ruleId = 5;
					break;
				case '4':
					this.ruleId = 4;
					break;
			}
		},
		onShow() {
			shellList({
				shell_id: this.id
			}).then(res => {
				res.data.shell_list[0].diesVenit = this.$api.deciml(String(res.data.shell_list[0].diesVenit));
				res.data.shell_list[0].unexpired = this.$api.deciml(String(res.data.shell_list[0].unexpired));
				this.data = res.data.shell_list[0]
			})
			this.phone = uni.getStorageSync("userInfo").phone
			this.is_checked = uni.getStorageSync("userInfo").is_checked
			this.is_bind_bank = uni.getStorageSync("userInfo").is_bind_bank
			this.withdraw_pass = uni.getStorageSync("userInfo").withdraw_pass
		},
		methods: {
			godetail() {
				uni.navigateTo({
					url: "./shellList?id=" + this.data.id + "&name=" + this.data.name
				})
			},
			// 黑贝壳提现
			goWithdraw() {
				if (this.data.id == 1 && this.data.count == 0) {
					uni.showModal({
						title: "提示",
						content: "无可提现贝壳！",
						confirmColor: "#57BE6A",
						showCancel: false,
					})
					return
				}
				if (!this.phone) {
					uni.showModal({
						content: "提现需绑定手机号",
						confirmText: "去绑定",
						cancelText: "取消",
						confirmColor: "#57BE6A",
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/center/accountSet/phone/addPhone?backurl=true"
								})
							} else if (res.cancel) {}

						}
					})
					return
				} else if (!this.is_checked) {
					uni.showModal({
						content: "提现需实名认证",
						confirmText: "去认证",
						cancelText: "取消",
						confirmColor: "#57BE6A",
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/center/accountSet/certification/certification?backurl=true"
								})
							} else if (res.cancel) {}

						}
					})
					return
				} else if (!this.is_bind_bank) {
					uni.showModal({
						content: "提现需绑定银行卡",
						confirmText: "去绑定",
						cancelText: "取消",
						confirmColor: "#57BE6A",
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/center/accountSet/bank/addBank?backurl=true"
								})
							} else if (res.cancel) {}

						}
					})
					return
				} else if (!this.withdraw_pass) {
					uni.showModal({
						content: "提现需设置操作密码",
						confirmText: "去设置",
						cancelText: "取消",
						confirmColor: "#57BE6A",
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/center/accountSet/payPassword/payPassword?backurl=true"
								})
							} else if (res.cancel) {}

						}
					})
					return
				}
				uni.navigateTo({
					url: "./shellWithdraw?id=" + this.data.id
				})
			},
			// 黑贝壳服务
			goChange() {
				if (this.data.count == 0 && this.data.id == 1) {
					uni.showModal({
						content: this.shellname + "不足",
						confirmColor: "#57BE6A",
						showCancel: false,
					})
					return
				}
				if (this.data.diesVenit == 0 && this.data.id != 1) {
					uni.showModal({
						content: '可转换' + this.shellname + "不足",
						confirmColor: "#57BE6A",
						showCancel: false,
					})
					return
				}
				uni.navigateTo({
					url: `/pages/center/help/rulesDetail?id=15&tit=贝壳服务协议&shellId=${this.data.id}`
				})
			},
			// 置换商品
			goChangeGoods() {
				uni.navigateTo({
					url: "/mall/permutation/permutation?id=" + this.id
				})
			},
			// 申请收购
			applyToBuy() {
				uni.navigateTo({
					url:"/pages/center/shell/shell-sg?data=" + encodeURIComponent(JSON.stringify(this.data))
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		text-align: center;
		padding-top: 40%;

		.detail {
			position: absolute;
			right: 30rpx;
			top: 20rpx;
			width: 140rpx;
			height: 62rpx;
			line-height: 62rpx;
			text-align: center;
			font-size: 24rpx;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			background: $theme-color;
			border-radius: 31rpx;
		}

		.nowShallBox {
			display: flex;
			justify-content: center;

			.item {
				width: 50%;

				.icon {
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 60rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}

					text {
						font-size: 50rpx;
						font-weight: bold;
						color: rgba(51, 51, 51, 1);
					}
				}

				.label {
					margin-top: 20rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
				}
			}
		}

		.btn {
			position: fixed;
			left: 75rpx;
			width: 600rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			background: $theme-color;
			border-radius: 40rpx;
		}

		.withdraw,.goChangeGoods {
			bottom: 380rpx;
		}

		.exchange,.applyToBuy {
			bottom: 240rpx;
		}

		.goBuy {
			background-color: #fff;
			bottom: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #E65431;

			image {
				margin-right: 10rpx;
				width: 40rpx;
				height: 40rpx;
			}

			.goBuyText {
				font-size: 26rpx;
			}

			.icon-you {
				font-size: 26rpx;
			}
		}
	}
</style>
